<template>
  <view v-if="!loading">
    <view v-if="!details" class="no_data">
      <image src="../../static/img/v2_qpfnyw.png" class="no_img"></image>
      <view class="u-text-center color-999 u-font-sm">{{msg}}</view>
      <u-button type="primary"
                shape="circle"
                :custom-style="customStyle" @click="jump('/pages/pince/index')">点击开始测评</u-button>
    </view>
    <view v-else>
      <view class="t_1 u-flex flex-around">
        <view class="item_t_1 u-flex flex-center u-flex-col">
          <view class="u-font-lg color-333 u-p-t-30 u-p-b-20 font-b">您的职业兴趣：</view>
          <view v-if="details.careerInterest">
            <text v-for="(item, index) in details.careerInterest.split('')"
                  :key="index"
                  class="font-b u-font-40"
              :style="{color: getColor(item), fontSize: '25px'}"
            >{{item}}</text>
          </view>
        </view>
        <view class="item_t_1 u-flex flex-center u-flex-col">
          <view class="u-font-lg color-333 u-p-t-30 u-p-b-20 font-b">您的技能信心：</view>
          <view>
            <text v-for="(item, index) in details.skillConfidence.split('')"
                  :key="index"
                  class="font-b"
                  :style="{color: getColor(item), fontSize: '25px'}"
            >{{item}}</text>
          </view>
        </view>
      </view>
      <view>
        <view class="u-font-lg color-333 u-p-t-50 u-p-b-10 u-text-center font-b">您的职业价值观：</view>
        <view style="width: 80%;margin: 0 auto">
          <view class="item_percent" v-for="(item, index) in showData" v-if="details[item.key]" :key="index">
            <view class="u-font-sm" style="color: #2A6AAA">{{item.title}}</view>
            <view class="u-flex flex-between">
              <view class="flex-1 flex-center u-p-t-5">
                <u-line-progress active-color="#2A6AAA" :percent="details[item.key]" :show-percent="false" :height="20"></u-line-progress>
              </view>
              <view class="u-p-l-10 font-b u-font-28">
                {{details[item.key] > 33 ? (details[item.key] > 66 ? '高' : '中' ) : '低'}}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="width: 80%;margin: 0 auto" v-if="kemu.length">
        <view class="u-font-lg color-333 u-p-t-50 u-p-b-10 u-text-center font-b">您的高考选课推荐：</view>
        <view class="u-p-t-20 u-flex flex-around" style="flex-wrap: wrap">
          <view v-for="item in kemu" class="u-font-xs col-fff bg_D86E63 u-m-b-10"
                v-if="item.linkValue" :key="item"
                style="padding: 15upx 14upx">{{item.linkValue}}</view>
        </view>
      </view>
      <view style="width: 90%;margin: 0 auto">
        <view class="u-font-lg color-333 u-p-t-50 u-p-b-2 u-text-center font-b">您的职业与专业类推荐:</view>
        <view class="u-font-xs color-999 u-p-b-20 u-text-center">(可点击职业名称或专业进行探索)</view>
        <view class="m_table">
          <view class="th u-flex bg_D86E63 col-fff u-font-sm">
            <view class="item_th flex-1 u-text-center">类型</view>
            <view class="item_th flex-1 u-text-center">职业</view>
            <view class="item_th flex-1 u-text-center">专业类</view>
          </view>
          <view class="tr u-flex u-font-xs"
                :key="index"
                v-for="(item, index) in tableData"
                v-if="item.data.length && item.data[0].linkValue"
                style="height: 100%;align-content: stretch; align-items: normal">
            <view style="flex: 1" class="td flex-center u-flex u-text-center u-p-l-10 u-p-r-10">{{item.path}}</view>
            <view style="flex: 2" class="item_line">
              <view v-for="(item1, index1) in item.data" :key="index1" class="u-flex view" v-if="item1.linkValue" style="align-content: stretch;align-items: normal;">
                <view class="flex-1 flex-center u-flex td_2 td_2_2">
                  <navigator :url="`/pages/explore/job_detail?id=${item1.linkKey}`" style="height: 100%;width: 100%;text-align: center" class="color-active flex-center u-flex" v-if="item1.linkKey">{{ item1.linkValue }}</navigator>
                  <view v-else>{{ item1.linkValue }}</view>
                </view>
                <view class="flex-1 right_item">
                  <navigator v-for="(per, perIndex) in item1.specialtyList"
                             :key="perIndex"
                             v-if="per.secSpeCode"
                             class="u-flex flex-center td_2 color-active"
                             :url="`/pages/report/report_zhuanye_lei?code=${per.secSpeCode}&n=${per.specialtyName}`">{{per.specialtyName}}</navigator>
                  <view class="u-flex flex-center td_2" v-else>{{per.specialtyName}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
<!--      <view>
        <view class="u-font-lg color-333 u-p-t-50 u-p-b-10 u-text-center font-b">优势潜能分析：</view>
        <view style="width: 90%;margin: 0 auto">
          <u-parse :html="details.advantagePotentialAnalysis"></u-parse>
        </view>
      </view>
      <view>
        <view class="u-font-lg color-333 u-p-t-50 u-p-b-10 u-text-center font-b">学科能力分析：</view>
        <view style="width: 90%;margin: 0 auto">
          <u-parse :html="details.subjectAbilityAnalysis"></u-parse>
        </view>
      </view>
      <view>
        <view class="u-font-lg color-333 u-p-t-50 u-p-b-10 u-text-center font-b">行动建议：</view>
        <view style="width: 90%;margin: 0 auto">
          <u-parse :html="details.actionSuggestion"></u-parse>
        </view>
      </view>-->
      <view class="u-text-center color-999 u-font-xs u-padding-20">报告更新日期：{{details.updateTime}}</view>
    </view>
  </view>
</template>

<script>
  import {THEME} from "../mixins/config";
  import {request} from "../../util/api";

  export default {
    data() {
      return {
        details: '',
        customStyle: {
          background: THEME.btn_active_bg_color,
          padding: '0 30rpx',
          marginTop: '10px',
          marginLeft: '10%',
          width: '80%'
        },
        loading: true,
        msg: '',
        showData: [{title: '成就感',key:'raccomplishment'}, {title: '生活方式',key:'rlifestyle'},  {title: '挑战',key:'rchallenge'},
          {title: '声望',key:'rprestige'},
          {title: '同事',key:'rcooperation'},
          {title: '安全感',key:'rsecurity'},
          {title: '创造性',key:'rcreativity'},
          {title: '监督',key:'rsupervise'},
          {title: '收入',key:'rincome'},
          {title: '多样化',key:'rdiversification'},
          {title: '独立性',key:'rindependence'},
          {title: '工作场所',key:'rworkplace'}
        ],
        kemu: [],
        tableData: []
      }
    },

    mounted() {
      this.getDetail()
    },

    methods: {
      getColor(val) {
        let color = THEME.text_active_color
        switch (val) {
          case 'I':
            color = '#855BE9'
            break;
          case 'A':
            color = '#D33332'
            break;
          case 'E':
            color = '#857423'
            break;
          case 'C':
            color = '#478432'
            break;
          case 'R':
            color = '#2B72D4'
            break;
          case 'S':
            color = '#DE6C2B'
            break;
        }
        return color
      },

      getDetail() {
        request({
          url: '/wx/getUserReport',
          method: 'post',
          platfom: 'weixin'
        }).then(res => {
          this.showData.sort((a,b) => {
            return res.data[b.key] - res.data[a.key]
          })
          this.loading = false
          this.details = res.data
          if (res.code != 200) {
            this.msg = res.msg
          }
          if (this.details) {
            let groupArr = this.groupByPath(this.details.expandList, 'linkType')
            this.kemu = groupArr.filter(item => item.path == '高考科目推荐')[0].data
            let tableData = groupArr.filter(item => item.path != '高考科目推荐')
            this.tableData = tableData
          }
        })
      },

      groupByPath(arr, key) {
        let map = {}
        for (let i = 0; i < arr.length; i++) {
          let ai = arr[i]
          if (!map[ai[key]]) {
            map[ai[key]] = [ai]
          } else {
            map[ai[key]].push(ai)
          }
        }
        let res = []
        Object.keys(map).forEach(keys => {
          res.push({
            path: keys,
            data: map[keys],
          })
        })
        return res
      },

      jump(path) {
        this.$u.route({
          url: path,
          type: 'switchTab'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  $active_color: #2A6AAA;
  .no_data {
    .no_img {
      width: 100%;
      height: 600upx;
    }
  }
  .bg_D86E63 {
    background: #2A6AAA;
  }
  .width_100 {
    width: 100%;
  }
  .tr {
    background: #E4E5E6;
    border-top: 1px solid #fff;
    .item_line .view {
      .td_2 {
        border-right: 1px solid #fff;
      }
    }
  }
  .td {
    border-right: 1px solid #fff;
    &:last-child {
      border-right: none;
    }
  }
  .th {
    padding: 15upx 0;
  }
  .td_2 {
    border-bottom: 1px solid #fff;
    padding: 15upx 0;
    &:last-child {
      border-bottom: none;
    }
  }
  .right_item {
    border-bottom: 1px solid #fff;
  }
  .item_line .view {
    &:last-child {
      .right_item {
        border-bottom: none;
      }
      .td_2_2 {
        border-bottom: none;
      }
    }
  }
</style>
